<template>
	<view class="content">
		<view class="head-bg">
			<!-- 登录前 -->
			<view class="head-bg-box" v-if="token === ''">
				<view class="head-a-img">
					<image src="../../static/my/upload_head.png"></image>
				</view>
				<view class="head-b-txt">
					<view class="txt-name">账号未登录</view>
				</view>
			</view>
			<!-- 登录后-->
			<view class="head-bg-box" v-else>
				<!-- <view v-if="headImg == ''" class="head-a-img" @tap="uploadHeadImg()">
					<image src="../../static/my/upload_head.png"></image>
				</view> -->
				<view class="head-b-img">
					<image :src="item" mode="widthFix" v-for="(item,index) in img" :key="index" @click="prevImage(index)"></image>
				</view>
				<view class="head-b-txt">
					<view>用户名：{{ name }}</view>
					<!-- <view class="txt-last" v-if="loginTime">上次登录：{{ loginTime }}</view>
					<view v-else></view> -->
					<view>账号等级：<text style="color: #f18b49;">{{ rankId }}</text></view>
					<view>手机号码：{{ phone }}</view>
				</view>
			</view>
		</view>
		<!-- 收藏、足迹 -->
		<view class="my-operation">
			<view class="my-oper-box">
				<view class="img-box" v-for="(item,index) in operationList" :key="index" @click="toCollect(item.id)">
					<image :src="item.img" mode=""></image>
					<view class="box-txt">{{ item.cont }}</view>
				</view>
			</view>
		</view>
		<!-- 订单操作 -->
		<view class="order-operation">
			<view class="order-opera-box">
				<view class="order-head-cont">
					<view class="h-cont-left">我的订单</view>
					<view class="h-cont-right" @click="toOrder(0,'全部')">
						<text>全部</text>
						<uni-icons type="right" size="14" color="#999" style="margin-top: 6rpx;"></uni-icons>
					</view>
				</view>
				<view class="my-oper-box" v-if="token === ''">
					<view class="img-box" v-for="(item,index) in orderIconList2" :key="index">
						<uni-badge size="small" absolute="rightTop" :offset="offSet" :custom-style="customStyke">
							<image :src="item.img" mode=""></image>
						</uni-badge>
						<view class="box-txt">{{ item.cont }}</view>
					</view>
				</view>
				<view class="my-oper-box" v-else>
					<view class="img-box" @click="toOrder(item.current,item)" v-for="(item,index) in orderIconList" :key="index">
						<uni-badge size="small" :text="item.num" absolute="rightTop" :offset="offSet" :custom-style="customStyke">
							<image :src="item.img" mode=""></image>
						</uni-badge>
						<view class="box-txt">{{ item.cont }}</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 个人中心列表 -->
		<uni-list>
			<uni-list-item title="我的账单" showArrow clickable @click="clickRcn()"></uni-list-item>
			<uni-list-item title="收货地址" showArrow clickable @click="clickAddress()"></uni-list-item>
			<uni-list-item title="开票信息" showArrow clickable @click="clickInvoice()"></uni-list-item>
			<uni-list-item title="个人信息" link to="/pages/my/person-center" showArrow clickable ></uni-list-item>
			<uni-list-item title="提升等级" link to="/pages/my/up-grade" showArrow clickable></uni-list-item>
			<uni-list-item title="关于国集采" link to="/pages/my/about" showArrow clickable ></uni-list-item>
			<uni-list-item @click="backLogin()" title="退出登录" showArrow clickable v-show="token"></uni-list-item>
		</uni-list>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				name: '',
				token: '',
				phone: '',
				headImg: '',
				userId: '',
				rankId: '',
				username: '',
				loginTime: '',
				offSet: [1, 2],
				img: ['../../static/my/head-img.png'],
				customStyke: {'background': '#f18b49'},
				operationList: [
					{ img: '../../static/my/collect_false.png', cont: '商品收藏', id: 1 },
					// { img: '../../static/my/collect_true.png', cont: '店铺关注', id: 2 },
					{ img: '../../static/my/footprint.png', cont: '我的足迹', id: 3 },
					{ img: '../../static/my/exchanged.png', cont: '退换/售后', id: 4 },
				],
				orderIconList: [
					{num: '', current: 1, img: '../../static/my/obligation.png', cont: '待付款'},
					{num: '', current: 2, img: '../../static/my/drop_shipping.png', cont: '待发货'},
					{num: '', current: 3, img: '../../static/my/collecting.png', cont: '待收货'},
					{num: '', current: 4, img: '../../static/my/evaluate.png', cont: '待评价'},
					{num: '', current: 4, img: '../../static/my/evaluation.png', cont: '已评价'},
				],
				orderIconList2: [
					{img: '../../static/my/obligation.png', cont: '待付款'},
					{img: '../../static/my/drop_shipping.png', cont: '待发货'},
					{img: '../../static/my/collecting.png', cont: '待收货'},
					{img: '../../static/my/evaluate.png', cont: '待评价'},
					{img: '../../static/my/evaluation.png', cont: '已评价'}
				],
			}
		},
		onShow() {
			this.token = uni.getStorageSync('token')
			this.userId = uni.getStorageSync('userid')
			this.name = uni.getStorageSync('username')
			this.loginVerify()
		},
		methods: {
			// 登录验证
			loginVerify(){
				if(this.token == ''){
					uni.showModal({
						title: '登录验证',
						cancelText: '先逛逛',
						confirmText: '去登录',
						confirmColor: '#f18b49',
						content: '登录账号享受更多优惠，是否登录账号？',
						success: (res) => {
							if (res.confirm) {
								uni.navigateTo({
									url: '/pages/login/code-login'
								})
							} else if (res.cancel) {
								uni.switchTab({
									url: '/pages/index/index'
								})
							}
						}
					})
				}else{
					this.getNameOrPhone()
					this.getOrderNum()
				}
			},
			clickAddress() {
				uni.navigateTo({
					url: '/pages/my/address/shop-address?userId=' + this.userId
				})
			},
			
			//跳转开票信息
			clickInvoice() {
				uni.navigateTo({
					url: '/pages/invoice/show-invoice?user_id=' + this.userId
				})
			},
			//跳转我的对账
			clickRcn(){
				uni.navigateTo({
					url:'/pages/my/Reconciliation/Reconciliation?user_id='+this.userId
				})
			},
			// 获取名字、手机号、等级
			getNameOrPhone(){
				this.$http('/gjcApi/verifyToken', { username: this.name, token: this.token }, res => {
					uni.setStorageSync('mobile', res.mobile)
					uni.setStorageSync('userid', res.user_id)
					this.phone = res.mobile
					this.loginTime = res.last_login
					switch (res.rank_id) {
						case 'sell_price':
							this.rankId = "普通会员"
							break;
						case 'included_price':
							this.rankId = "二级会员"
							break;
						case 'gold_price':
							this.rankId = "三级会员"
							break;
						case 'diamond_price':
							this.rankId = "四级会员"
							break;
						case 'crown_price':
							this.rankId = "五级会员"
							break;
						case 'master_price':
							this.rankId = "六级会员"
							break;
						case 'extreme_price':
							this.rankId = "七级会员"
							break;
						case 'tall_price':
							this.rankId = "八级会员"
							break;
						case 'market_price':
							this.rankId = "内部员工"
							break;
						case 'cost_price':
							this.rankId = "管理员"
							break;
					}
				})
			},
			// 获取订单数量
			getOrderNum(){
				this.$http(`/gjcApi/getOrderConut?user_id=${this.userId}`, {}, res => {
					this.orderIconList[0].num = res.await_payment
					this.orderIconList[1].num = res.await_deliver
					this.orderIconList[2].num = res.await_consignee
					this.orderIconList[3].num = res.await_evaluate
					this.orderIconList[4].num = res.await_isevaluate
				})
			},
			// 退出登录
			backLogin() {
				uni.showModal({
					title: '退出登录',
					cancelText: '保持登录',
					cancelColor: '#f18b49',
					confirmText: '退出登录',
					confirmColor: '#999',
					content: '退出登录将无法享受优惠，确定退出吗？',
					success: (res) => {
						if (res.confirm) {
							this.$getHttp(`/gjcApi/login_out?user_id=${this.userId}`, {}, res => {
								if(res.code == 200){
									uni.removeStorageSync('token')
									uni.navigateTo({
										url: '/pages/login/code-login'
									})
								}
							})

							
						}
					}
				})
			},
			// 上传头像
			// uploadHeadImg() {
			// 	uni.chooseImage({
			// 		count: 1,
			// 		success: (res) => {
			// 			this.headImg = res.tempFilePaths[0]
			// 		}
			// 	})
			// },
			// 预览图片
			prevImage(i) {
				uni.previewImage({
					current: i,
					urls: this.img,
				})
			},
			// 跳转收藏、足迹
			toCollect(id){
				if(id == 1){
					uni.navigateTo({
						url: '/pages/my/collect?userId=' + this.userId 
					})
				} else if(id == 3){
					uni.navigateTo({
						url: '/pages/my/footprint?user_id=' +this.userId
					})
				} else if(id == 4){
					uni.navigateTo({
						url: '/pages/my/return-after' 
					})
				}
			},
			// 跳转我的订单
			toOrder(current,item){
				if(item.cont == "待评价"){
					uni.navigateTo({
						url: `/pages/my/order/all-order?userId=${this.userId}&current=${current}&current2=0`
					})
				} else if(item.cont == "已评价"){
					uni.navigateTo({
						url: `/pages/my/order/all-order?userId=${this.userId}&current=${current}&current2=1`
					})
				} else {
					uni.navigateTo({
						url: `/pages/my/order/all-order?userId=${this.userId}&current=${current}`
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		.head-bg{
			height: 300rpx;
			background-image: linear-gradient(#ffc073, #fff3ed);
			.head-bg-box{
				display: flex;
				padding: 20rpx 30rpx;
				align-items: center;
				border-radius: 20rpx;
				.head-a-img{
					image{
						width: 94rpx;
						height: 94rpx;
						padding: 20rpx;
						border-radius: 50%;
						border: 4rpx solid #bfbfbf;
					}
				}
				.head-b-img{
					image{
						width: 140rpx;
					}
				}
				.head-b-txt{
					display: flex;
					height: 150rpx;
					font-size: 30rpx;
					padding-left: 25rpx;
					flex-direction: column;
					justify-content: space-between;
					.txt-last{
						color: $uni-text-color-grey;
					}
				}
			}
		}
		.my-operation{
			margin-top: -105rpx;
			padding: 0 15rpx;
		}
		.order-operation{
			padding: 20rpx 15rpx 30rpx 15rpx;
			.order-opera-box{
				padding-top: 25rpx;
				border-radius: 20rpx;
				background: $uni-model-color;
				.order-head-cont{
					display: flex;
					font-size: 34rpx;
					align-items: center;
					padding: 0 20rpx 20rpx 28rpx;
					justify-content: space-between;
					.h-cont-left{
						font-weight: bold;
						color: $uni-text-color;
					}
					.h-cont-right{
						display: flex;
						font-size: 28rpx;
						align-items: center;
						color: $uni-text-color-grey;
					}
				}
			}
		}
	}
	.my-oper-box{
		display: flex;
		padding: 25rpx 0;
		align-items: center;
		border-radius: 20rpx;
		background: $uni-model-color;
		justify-content: space-around;
		.img-box{
			text-align: center;
			image{
				width: 60rpx;
				height: 60rpx;
				margin-bottom: 4rpx;
			}
			.box-txt{
				font-size: 28rpx;
				color: $uni-text-color-grey;
			}
		}
	}
</style>
